<template>
  <div class="home">
     <div v-for="(item,index) of musics" :key="item.title">
       <h4 @click="handleDetail(index)">{{item.title}}</h4>
       <div class="container">
          <music-item
          @toggle="handleToggle"
           :item="val" v-for="val of  item.res" :key="val.id"></music-item>
       </div>
     </div>
  </div>
</template>

<script>
import MusicItem from "../../components/music/MusicItem.vue";
import HomeHttp from "../../models/HomeHttp";
export default {
  name: "Home",
  methods: {
    handleToggle(id,name) {
      // console.log(id,name);
      this.$store.commit("changeName",name)
      this.$router.push(`/detail/${id}`)
    },
    handleDetail(index){
      // console.log(index)
      this.$router.push(`/more?value=${index}`)
    }
  },
  components:{
    MusicItem
  },
  data() {
    return {
      musics: {}
    };
  },
  async mounted() {
    try {
      var hots = await HomeHttp.getHotMusic();
      var news = await HomeHttp.getNewMusic();
      var djs = await HomeHttp.getDj();
      this.musics = {
        hots: {
          title: "热门音乐",
          res: hots.data.playlists.slice(0, 3),
        },
        news: {
          title: "最新音乐",
          res: news.data.albums.slice(0, 3),
        },
        djs: {
          title: "主播电台",
          res: djs.data.result.slice(0, 3),
        },
        
      };
    } catch (err) {
      /* this.$message() */
      console.log(err);
    }
  },
};
</script>
<style scoped>
h4{
  line-height: 60px;
}
</style>
